<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>添加好友</title>
		<script src="../../../javascript/api.js"></script> <!-- api.js必须放到最开头 -->
	    <script src="../../../javascript/axios.js"></script>
	    <script src="../../../javascript/vue.js"></script>
	   	<script src="../../../javascript/jquery.js" type="text/javascript" charset="utf-8"></script>
	    <link rel="stylesheet" type="text/css" href="../css/apiAddFriend.css"/>
	</head>
	<body>
				<div class="" id="apiAddFriend">
					<div class="content page_one"  v-if="indexPage===1">
						<input class="input_search" placeholder="搜索" v-model="inputSearch" type="" name="" id="" value="" />
						<p class="p_title">{{Ptitle}}</p>
						<dl v-for="item in dlChoose">
							<dt onclick="choose_this(this)">{{item.dtTitle}}<span>></span></dt>
							<dd @click="openPxCook(item_dd)" class="dds" v-for="item_dd in item.ddItem" >
								<img :src="item_dd.headImg"/>
								<span>{{item_dd.name}}</span>
							</dd>
						</dl>
					</div>
					
					<div class="page_two"  v-else-if="indexPage===2">
						<div class="big_head">
							<img :src="chooseMan.headImg"/>
							<p class="span_choose_name">{{chooseMan.name}}</p>
						</div>
						<div class="ul_detail">
							<ul>
								<li class="">部门<span>{{ulDetail.bm}}</span></li>
								<li>岗位<span>{{ulDetail.gw}}</span></li>
								<li>警号<span>{{ulDetail.jh}}</span></li>
								<li>手机<span>{{ulDetail.phone}}</span></li>
								<li>警钟<span>{{ulDetail.jz}}</span></li>
								<li>备注<span>{{ulDetail.bz}}</span></li>
							</ul>
						</div>
						<p class="p_button" style="text-align: center;margin-top: 15px;">
							<button @click="cancel_to_one">取消</button>
							<button @click="addFriend">加为好友</button>
						</p>
					</div>
					
					<div class="page_three" v-else-if="indexPage===3">
						<p>
							你需要发送验证申请，等待对方通过。
						</p>
						<div class="" style="position: relative;">
							<img :src="chooseMan.headImg"/>
							<span> {{chooseMan.name}}</span>
						</div>
						
						<textarea name="" v-model="inputThree" rows="" cols="" placeholder="  请输入验证信息" maxlength="100"></textarea>
						<button class="button_cancel" @click="cancel_to_cook">取消</button>
						<button class="button_send" @click="send">确定</button>
					</div>
					
				</div>
		
	</body>
	<script src="../js/chatApi.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function choose_this(ev){
			$(ev).parent('dl').toggleClass("choose");
		}
		new Vue({
			el:"#apiAddFriend",
			data:{
				inputSearch:'',
				indexPage:1,/*1，2，3对应不同页面*/
				Ptitle:'金越软件',
				inputThree:'',
				chooseMan:{},
				dlChoose:[
					{
						dtTitle:"数据服务中心",
						ddItem:[
								{
									headImg:'../../../images/lefticon/user.png',
									name:'李四里',
									userCode:'23232',
								},
								{
									headImg:'../../../images/lefticon/user.png',
									name:'陈四里',
									userCode:'23232',
								},
								{
									headImg:'../../../images/lefticon/user.png',
									name:'黄四里',
									userCode:'23232',
								},
						],
					},
					{
						dtTitle:"大数据产品中心",
						ddItem:[
								{
									headImg:'../../../images/lefticon/user.png',
									name:'李四里',
									userCode:'23232',
								},
								{
									headImg:'../../../images/lefticon/user.png',
									name:'陈四里',
									userCode:'23232',
								},
								{
									headImg:'../../../images/lefticon/user.png',
									name:'黄四里',
									userCode:'23232',
								},
						],
					},
					{
						dtTitle:"联系人",
						ddItem:[
								{
									headImg:'../../../images/lefticon/user.png',
									name:'李四里',
									userCode:'23232',
								},
								{
									headImg:'../../../images/lefticon/user.png',
									name:'陈四里',
									userCode:'23232',
								},
								{
									headImg:'../../../images/lefticon/user.png',
									name:'黄四里',
									userCode:'23232',
								},
						],
					},
				],
				ulDetail:{
					bm:'巡查分队',
					gw:"办事员",
					jh:"N38198",
					phone:'13798562339',
					jz:'民警',
					bz:'哈哈哈哈1'
				}
			},
			methods:{
				openPxCook(val){/*到第二页*/
					this.indexPage=2;
					this.chooseMan=val;
				},
				cancel_to_one(){/*到第一页*/
					this.indexPage=1;
				},
				addFriend(){/*添加好友*/
					this.indexPage=3;
				},
				send(){ 
					parent.layer.msg('已成功发送请求', {
					        icon: 1
					});
					setTimeout(function(){
					 		parent.layer.closeAll(); 
					},1800)
				},
				cancel_to_cook(){/*到第二页*/
					this.indexPage=2;
				}
			}
			
		})
	</script>
</html>
